<template>
  <div>
    <h1>setup</h1>
    <button @click="num++">{{num}}</button> <br>
    <stepper-com :value="num" @input="num=$event" ref="stepper"></stepper-com>
    <p>{{size}}</p>
  </div>
</template>
<script setup>
// 使用setup 可以简写（不用导出，组件不用注册了）
  import StepperCom from '@/components/StepperCom.vue'
  // 导入useWinSize方法
  import {useWinSize} from '@/utils/utils.js'
  import {ref,onMounted} from 'vue';
  const num = ref(5);
  
  const stepper = ref();
  onMounted(() => {
    console.log("组件已经挂载完毕")
    // 组件挂载完毕引用steper组件
    // stepper.value就是对stepper-com 组件的引用
    console.log(stepper.value.count)
  })
  // 返回执行返回一个对象size
 const size = useWinSize();
</script>